<template>
    <div class=" pl-4 bg-black h-full">
        <swiper :modules="modules" navigation :pagination="{ clickable: true }" :scrollbar="{ draggable: true }"
            @slideChange="onSlideChange" class=" h-full">
            <swiper-slide v-for="item in 2" :key="item" class=" h-full">
                <div class=" flex  flex-nowrap w-full h-full">
                    <div v-for="product in products" :key="product.id"
                        class=" px-4 py-12 w-1/3 mr-4  min-h-full !bg-[#001529]">
                        <h2 class=" text-2xl"
                            :class="[product.member_level == 'monthly' ? 'text-green-500' : product.member_level == 'quarterly' ? ' text-purple-500' : 'text-orange-500']">
                            {{ product.name.substr(product.name.length - 4, 4) }}
                        </h2>
                        <h3 :class="[route.name == 'subscription' ? 'text-5xl' : 'text-4xl']"
                            class=" mt-5 font-semibold text-4xl text-white">
                            ￥{{ (product.price / 100).toFixed(2) }}
                            <span class=" mr-4 text-xl font-normal">
                                /{{ product.member_level == 'monthly' ? '月' : product.member_level == 'quarterly' ? '季' :
                                    '年' }}
                            </span>
                        </h3>
                        <p class=" mt-4 text-xl font-normal text-white text-gray-300">
                            有效天数{{ product.member_level == 'monthly' ? 31 : product.member_level == 'quarterly' ? 93 : 365
                            }}天
                        </p>
                        <p class=" mt-2 text-base font-normal text-white text-gray-300">
                            日均单价{{ product.unit_price / 100 }}元
                        </p>
                        <div @click="trande(product.id)"
                            :class="[product.member_level == 'monthly' ? ' bg-green-500' : product.member_level == 'quarterly' ? ' bg-purple-500' : 'bg-orange-500']"
                            class=" text-white rounded-xl cursor-pointer text-xl mt-8 w-full h-14 leading-[56px] text-center">
                            订 购
                        </div>

                        <ul class=" mt-8 text-gray-300 text-base">
                            <li class=" text-[#ffff99] leading-[55px] border-b-slate-600 border-b-[1px]">
                                <check-outlined class=" mr-1 align-middle" />
                                AI模型:
                                <span class=" ml-1 ">{{ product.gpt_models }}</span>
                            </li>
                            <li class=" leading-[55px] border-b-slate-600 border-b-[1px]">
                                <span v-if="product.extensions.limited_generations != -1"
                                    class=" inline-block w-[15px] h-[15px] align-middle border-[1px] border-white"></span>
                                <check-outlined v-else class=" mr-1 align-middle" />
                                发布时间:
                                {{ product.pub_date }}
                            </li>
                            <li class=" leading-[55px] border-b-slate-600 border-b-[1px]">
                                <span v-if="product.extensions.limited_generations != -1"
                                    class=" inline-block w-[15px] h-[15px] align-middle border-[1px] border-white"></span>
                                <check-outlined v-else class=" mr-1 align-middle" />
                                不限额度
                            </li>
                            <li class=" leading-[55px] border-b-slate-600 border-b-[1px]">
                                <span v-if="!product.extensions.dedicated_ip"
                                    class=" inline-block w-[15px] h-[15px] align-middle border-[1px] border-white"></span>
                                <check-outlined v-else class=" mr-1 align-middle" />
                                独享IP
                            </li>
                            <li class=" leading-[55px] border-b-slate-600 border-b-[1px]">
                                <span v-if="!product.extensions.customer_service"
                                    class=" inline-block w-[15px] h-[15px] align-middle border-[1px] border-white"></span>
                                <check-outlined v-else class=" mr-1 align-middle" />
                                1V1客服
                            </li>
                            <li class=" leading-[55px] border-b-slate-600 border-b-[1px]">
                                <span v-if="!product.extensions.fast_generations"
                                    class=" inline-block w-[15px] h-[15px] align-middle border-[1px] border-white"></span>
                                <check-outlined v-else class=" mr-1 align-middle" />
                                极速响应
                            </li>
                        </ul>
                    </div>
                </div>
            </swiper-slide>
        </swiper>

        <!-- 付款 -->
        <payment :show="showPay" :trade_no="trade_no" @cancel=" showPay = false" />
    </div>
</template>

<script lang='ts' setup>
import { chatgptTrades, getProduct } from '@/request/api';
import main from '@/store';
import { CheckOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';
import { A11y, Navigation, Pagination, Scrollbar } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Swiper, SwiperSlide } from 'swiper/vue';
import payment from './payment.vue';

const modules = [Navigation, Pagination, Scrollbar, A11y]
const route = useRoute()
const { loading } = storeToRefs(main())
let products = ref<any[]>([])
let currentPage = ref<number>(1)
let showPay = ref<boolean>(false)
let trade_no = ref<string>('')
const getData = () => {
    loading.value = true
    getProduct({ page: currentPage.value }).then(res => {
        if (res.code == 200) {
            products.value = res.result.products
            loading.value = false
        }
    })
}

const trande = (product_id: number) => {  //下单
    chatgptTrades({ product_id }).then(res => {
        if (res.code == 200) {
            trade_no.value = res.result.trade_no
            showPay.value = true
        }
    })
}

const onSlideChange = (e: any) => {
    currentPage.value = e.activeIndex + 1
    getData()
};

onMounted(() => {
    getData()
})
</script>
<style scoped>
.active {
    @apply text-default border-base
}
</style>